<template>
	<view class="page">
		<q-navbar :title="title" />
		<view class="center">
			<view class="list-item" v-for="(v,i) in list" :key="i" @click="edit(v)">
				<view class="status">
					<img src="@/static/images/message-dot.png" alt="" v-if="v.massageType==0">
					<img src="@/static/images/message.png" alt="" v-else>
				</view>
				<view class="info">
					<view class="info-title">
						{{v.content}}
					</view>
					<view class="time">
						{{v.createTime}}
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<u-loadmore :status="status" v-if="list[0]" />
			<!-- 数据为空 -->
			<u-empty mode="list" v-if="!list[0]"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [],
				status: 'nomore',
				title: '消息通知'
			}
		},
		onShow(option) {
			this.findList()
		},
		methods: {
			findList() {
				let data = {
					userId: this.$s.get('userInfo').userId,
					typeDepth: 0
				}
				this.$api.listMassage(data).then(res => {
					this.list = res.rows
				})
			},
			edit(v) {
				let data = {
					id: v.id,
					massageType: 1
				}
				this.$api.updateMassage(data).then(res => {
					this.findList()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
		width: 100vw;
		background-color: #f7f7f7;

		.center {
			margin: 20rpx;

			.list-item {
				display: flex;
				background-color: #fff;
				padding: 30rpx;
				border-radius: 20rpx;
				margin: 20rpx 0;

				.status {
					width: 40rpx !important;
					height: 40rpx !important;
					margin: 5rpx 10rpx;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					.info-title {
						color: #555;
						font-size: 14px;
						font-weight: 700;
						margin-bottom: 10rpx;
					}

					.time {
						color: #999;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>